<template>
  <div class="">
    <p v-if="isShow">我显示了吗</p>
    <ul>
      <li v-for="item in persons" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
// const isShow = ref<boolean>(true)

// 如果是简单数据类型，一般不需要写泛型，里面写上类型，因为它会自动推断
const isShow = ref(true)

// !!!引用类型一定通过 as 给它转成更加具体的类型
// const persons = ref([])
type Person = {
  id: number
  name: string
}

// ts中我们定义引用类型（对象、数组）都要给它指明具体的类型
// const persons = ref([] as Person[])
// 下面这一种也是指定更加具体的类型
const persons = ref<Person[]>([])

setTimeout(() => {
  persons.value = [
    { id: 111, name: 'zhangsan' },
    { id: 222, name: 'lisi' }
  ]
}, 1000)
</script>

<style scoped></style>
